<template>
    <div class="CourseType">

        <div class="nav">
            <el-input v-model="input" placeholder="请输入课程类型" style="width: 250px; margin-top: 15px;" clearable
                @keyup.enter.native="handleQuery">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer; height: 10px;"
                    @click="handleQuery"></i>
            </el-input>
            <el-button style=" margin-top: 10px; margin-right: 20px; margin-left: 20px;" type="primary"
                @click="addMemberHandle()">
                + 添加课程类型
            </el-button>
        </div>


        <div class="tab">
            <el-table style=" width: 75%; padding-top: 15px;" :data="tableData" stripe class="tableBox">

                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="addtime" label="创建时间" width="350"></el-table-column>
                <el-table-column prop="coursetype" label="课程类型" width="250"></el-table-column>
                <el-table-column label=" 操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="medium" class="blueBug" @click="update(scope.row)">
                            修改
                        </el-button>
                        <el-button type="text" size="medium" class="delBut non" @click="deleteHandle(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页栏 -->
            <el-pagination class="pageList" :page-sizes="[4, 8, 12, 16]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>



        <el-dialog :title=mytitle :visible.sync="dialogVisible" width="30%" top="25vh">
            <el-form :model="courseType">
                <el-form-item label="课程类型">
                    <el-input v-model="courseType.coursetype" placeholder="请输入课程类型"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>





    </div>
</template>

<script>
export default {
    name: 'CourseType',
    data() {
        return {
            input: "",
            //总数据条数
            counts: 0,
            //当前页
            page: 1,
            //每页条数
            pageSize: 4,
            // 表格数据
            tableData: [],
            mytitle: "",
            courseType: {
                coursetype: "",
                id: "",
            },
            dialogVisible: false,

        }
    },
    methods: {
        //输入框查询
        handleQuery() {
            this.getTableData();
        },
        // 打开注册框
        addMemberHandle() {
            this.dialogVisible = true;
            this.mytitle = "添加类型";
            Object.keys(this.courseType).forEach((key) => (this.courseType[key] = ''))
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.getTableData();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getTableData();
        },
        deleteHandle(val) {
            this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.delete("/coursetype/delete/" + val)
                    .then(res => {
                        if (res.data === "success") {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                        this.getTableData();
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        getTableData() {
            const params = {
                params: {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input,
                }
            }
            this.axios.get("/coursetype/page", params)
                .then(res => {
                    this.counts = res.data.total;
                    this.tableData = res.data.records;
                })
        },
        update(val) {
            this.dialogVisible = true;
            this.courseType.coursetype = val.coursetype;
            this.courseType.id = val.id;
            this.mytitle = "修改类型";
        },
        //提交数据
        submit() {
            //却所有的空格
            this.courseType.coursetype = this.courseType.coursetype.replace(/\s*/g, "");
            if (this.mytitle === "添加类型") {
                this.axios.post("/coursetype/save", this.courseType)
                    .then(res => {
                        if (res.data === "success") {
                            this.$notify({
                                showClose: true,
                                message: "添加类型成功",
                                type: 'success',
                                duration: 1000
                            })
                        }
                        else if (res.data === "exist") {
                            this.$notify({
                                showClose: true,
                                message: "课程类型已存在",
                                type: 'error',
                                duration: 1000
                            })
                        } else {
                            this.$notify({
                                showClose: true,
                                message: "添加失败",
                                type: 'error',
                                duration: 1000
                            })
                        }
                        this.getTableData();
                    })
                this.dialogVisible = false
            } else {
                this.axios.post("/coursetype/update", this.courseType)
                    .then(res => {
                        if (res.data === "success") {
                            this.$notify({
                                showClose: true,
                                message: "修改类型成功",
                                type: 'success',
                                duration: 1000
                            })
                            this.getTableData();
                        }
                        else if (res.data === "exist") {
                            this.$notify({
                                showClose: true,
                                message: "课程类型名字重复",
                                type: 'error',
                                duration: 1000
                            })
                        }
                        else {
                            this.$notify({
                                showClose: true,
                                message: "修改失败",
                                type: 'error',
                                duration: 1000
                            })
                        }
                    })
                this.dialogVisible = false
            }
        }

    },
    mounted() {
        this.getTableData();
    }
}

</script>
<style scoped>
@font-face {
    font-family: "mmmm";
    src: url(../../font/也字工厂喵喵体.ttf);
}

.CourseType {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}

.nav {
    width: 60%;
    height: 10%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);
}

.nav .el-button {
    width: 170px;
    height: 50px;
    font-size: 18px;
    background: #fff;
    border: none;
    border-radius: 50px;
    font-family: mmmm;
    font-weight: 500;
    color: #000;
    outline: none;
    cursor: pointer;
    transition: all 0.4s;
}

.nav .el-button:hover {
    background-color: rgba(29, 201, 160, 0.08);
    border-color: #1DC9A0;
    color: #1DC9A0;
    transform: translateY(-5px) scale(1.05);
}

.nav .el-button:active {
    background-color: transparent;
    border-color: #1DC9A0;
    color: #1DC9A0;
    transform: translateY(5px) scale(0.95);
}

.nav .el-button:disabled {
    background-color: rgba(255, 255, 255, 0.16);
    color: #8E8E93;
    border-color: #8E8E93;
}

.tab {
    width: 70%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);

}

.tab>>>.el-table tr {
    background-color: transparent;
}

.tab>>>.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: transparent;
}

.tab>>>.el-table th.el-table__cell {
    background-color: transparent;
}

.tableBox {
    background-color: transparent;
}

.pageList {
    margin-top: 10px;
    text-align: center;
}

.pageList>>>.el-pager li {
    background-color: transparent;
}
</style>